<template>
    <div class="container">
        <!-- 顶部操作区 -->
        <el-card class="detail-card">
            <div slot="header" class="card-header">
                <span class="title">客户详情</span>
                <div class="operations">
                    <router-link :to="{ path: '/client/addClient', query: { id: $route.query.id }}">
                        <el-button type="warning" size="mini" icon="el-icon-edit" round>编辑</el-button>
                    </router-link>
                    <router-link :to="{ path: '/contract/contractIndex', query: { clientID: $route.query.id }}">
                        <el-button type="success" size="mini" icon="el-icon-document" round>合同信息</el-button>
                    </router-link>
                </div>
            </div>

            <!-- 基本信息 -->
            <el-descriptions class="info-section" :column="3" border>
                <el-descriptions-item label="客户名称">
                    <span class="important-text">{{ info.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="重点客户">
                    <el-tag v-if="info.is_key == 1" type="danger" size="mini">重点客户</el-tag>
                    <el-tag v-else size="mini">非重点客户</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="内部介绍人">
                    {{ info.introducer || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="事务所维护人">
                    <span class="highlight-text">{{ info.user_name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="法人代表">
                    {{ info.legal_persono || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="统一社会信用代码">
                    {{ info.credit || '暂无' }}
                </el-descriptions-item>
            </el-descriptions>

            <!-- 联系信息 -->
            <el-descriptions class="info-section" :column="3" border>
                <el-descriptions-item label="联系电话">
                    {{ info.phone || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="所属行业">
                    {{ info.trade || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="详细地址">
                    {{ info.address || '暂无' }}
                </el-descriptions-item>
            </el-descriptions>

            <!-- 银行信息 -->
            <el-descriptions class="info-section" :column="2" border>
                <el-descriptions-item label="开户行">
                    {{ info.bank || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="银行账号">
                    {{ info.bank_account || '暂无' }}
                </el-descriptions-item>
            </el-descriptions>

            <!-- 联系人列表 -->
            <div class="contact-section">
                <div class="section-header">
                    <span class="section-title">联系人信息</span>
                </div>
                <el-table 
                    :data="info.tableData" 
                    border 
                    stripe
                    style="width: 100%"
                    :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                    :cell-style="{ 'text-align': 'center' }">
                    <el-table-column prop="name" label="姓名" min-width="120">
                    </el-table-column>
                    <el-table-column prop="phone" label="电话" min-width="150">
                    </el-table-column>
                    <el-table-column prop="appellation" label="称呼" min-width="120">
                    </el-table-column>
                    <el-table-column prop="department" label="部门" min-width="150">
                    </el-table-column>
                    <el-table-column prop="position" label="岗位" min-width="150">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import clientApi from '@/api/client'

export default {
    name: 'ClientDetail',
    data() {
        return {
            info: {},
            loading: false
        }
    },
    methods: {
        async getClientInfo() {
            try {
                this.loading = true;
                const response = await clientApi.getDetailClientInfo(this.$route.query.id);
                this.info = response.data.info;
            } catch (error) {
                this.$message.error('获取客户信息失败：' + error.message);
            } finally {
                this.loading = false;
            }
        }
    },
    created() {
        if (this.$route.query.id) {
            this.getClientInfo();
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}

.detail-card {
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }

        .operations {
            .el-button {
                margin-left: 10px;
            }
        }
    }

    .info-section {
        margin-bottom: 20px;
    }

    .important-text {
        color: #409EFF;
        font-weight: bold;
    }

    .highlight-text {
        color: #67C23A;
    }

    .contact-section {
        margin-top: 30px;

        .section-header {
            margin-bottom: 15px;

            .section-title {
                font-size: 15px;
                font-weight: bold;
                color: #606266;
                position: relative;
                padding-left: 10px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 16px;
                    background-color: #409EFF;
                    border-radius: 2px;
                }
            }
        }
    }
}

// 描述列表样式优化
:deep(.el-descriptions-item__label) {
    background-color: #f5f7fa;
    color: #606266;
}

:deep(.el-descriptions-item__content) {
    padding: 12px 15px;
}
</style>